/* We're splitting fonts into "preferred" and "performance" in order to optimize
   page loading. For important text, such as the body, we want it to load
   immediately and not wait for the web font load, whereas for other sections,
   such as headers and titles, we're OK with things taking a bit longer to load.
   We do have some optional classes and parameters in the mixins, in case you
   definitely want to make sure you're using the preferred font and don't mind
   the performance hit.
   We should be able to improve on this once CSS Font Loading L3 becomes more
   widely available.
*/
$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif;
$performance_font: 'Helvetica', 'Arial', sans-serif;

@mixin typo-preferred-font($usePreferred: true) {
  @if $usePreferred {
    font-family: $preferred_font;
  }
}

@mixin typo-display-4($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 112px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-3($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-2($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 45px;
  font-weight: 400;
  line-height: 48px;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-1($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 34px;
  font-weight: 400;
  line-height: 40px;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-headline($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  -moz-osx-font-smoothing: grayscale;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-title($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-subhead($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-body-2($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 14px;
  @if $usePreferred {
    font-weight: 500;
  } @else {
    font-weight: bold;
  }
  line-height: 24px;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-body-1($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-caption($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.08em;
  &:before {
    content: '“';
    opacity: 0.54;
  }

  &:after {
    content: '”';
    opacity: 0.54;
  }

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-menu($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-button($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

html, body {
	font-family: $performance_font;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

/**
 * Styles for HTML elements
 */

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  @include typo-display-3($colorContrast: true);
  font-size: 0.6em;
}

h1 {
  @include typo-display-3();
}

h2 {
  @include typo-display-2();
}

h3 {
  @include typo-display-1();
}

h4 {
  @include typo-headline();
}

h5 {
  @include typo-title();
}

h6 {
  @include typo-subhead();
}

p {
  @include typo-body-1();

  margin: 0 0 16px 0;
}

a {
  font-weight: bold;
}

blockquote {
  @include typo-blockquote();
}

mark {
  background-color: #f4ff81;
}

dt {
  font-weight: 700;
}

/**
 * Class Name Styles
 */

.wsk-typography--display-4 {
  @include typo-display-4();
}

.wsk-typography--display-4--colorContrast {
  @include typo-display-4($colorContrast: true);
}

.wsk-typography--display-3 {
  @include typo-display-3();
}

.wsk-typography--display-3--colorContrast {
  @include typo-display-3($colorContrast: true);
}

.wsk-typography--display-2 {
  @include typo-display-2();
}

.wsk-typography--display-2--colorContrast {
  @include typo-display-2($colorContrast: true);
}

.wsk-typography--display-1 {
  @include typo-display-1();
}

.wsk-typography--display-1--colorContrast {
  @include typo-display-1($colorContrast: true);
}

.wsk-typography--headline {
  @include typo-headline();
}

.wsk-typography--headline--colorContrast {
  @include typo-headline($colorContrast: true);
}

.wsk-typography--title {
  @include typo-title();
}

.wsk-typography--title--colorContrast {
  @include typo-title($colorContrast: true);
}

.wsk-typography--subhead {
  @include typo-subhead();
}

.wsk-typography--subhead--colorContrast {
  @include typo-subhead($colorContrast: true);
}

.wsk-typography--body-2 {
  @include typo-body-2();
}

.wsk-typography--Body-2--colorContrast {
  @include typo-body-2($colorContrast: true);
}

.wsk-typography--body-1 {
  @include typo-body-1();
}

.wsk-typography--body-1--colorContrast {
  @include typo-body-1($colorContrast: true);
}

.wsk-typography--body-2--forcePreferredFont {
  @include typo-body-2($usePreferred: true);
}

.wsk-typography--Body-2--forcePreferredFont--colorContrast {
  @include typo-body-2($colorContrast: true, $usePreferred: true);
}

.wsk-typography--body-1--forcePreferredFont {
  @include typo-body-1($usePreferred: true);
}

.wsk-typography--body-1--forcePreferredFont--colorContrast {
  @include typo-body-1($colorContrast: true, $usePreferred: true);
}

.wsk-typography--caption {
  @include typo-caption();
}

.wsk-typography--caption--forcePreferredFont {
  @include typo-caption($usePreferred: true);
}

.wsk-typography--caption--colorContrast {
  @include typo-caption($colorContrast: true);
}

.wsk-typography--caption--forcePreferredFont--colorContrast {
  @include typo-caption($colorContrast: true, $usePreferred: true);
}

.wsk-typography--menu {
  @include typo-menu();
}

.wsk-typography--menu--colorContrast {
  @include typo-menu($colorContrast: true);
}

.wsk-typography--button {
  @include typo-button();
}

.wsk-typography--button--colorContrast {
  @include typo-button($colorContrast: true);
}

.wsk-typography--textLeft {
    text-align: left
}

.wsk-typography--textRight {
    text-align: right
}

.wsk-typography--textCenter {
    text-align: center
}

.wsk-typography--textJustify {
    text-align: justify
}

.wsk-typography--textNowrap {
    white-space: nowrap
}


.wsk-typography--textLowercase {
    text-transform: lowercase
}

.wsk-typography--textUppercase {
    text-transform: uppercase
}

.wsk-typography--textCapitalize {
    text-transform: capitalize
}

.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td,
.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9
}

.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td,
.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9
}
